<template>
<section>

    <ButtonBar :keyName="barKey" @callAction="callAction">

    </ButtonBar>

    <!--列表-->
    <div class="table">
        <el-table ref="singleTable" @select="select" :data="permissionList" highlight-current-row v-loading="listLoading" style="width: 100%;" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" row-key="Id">

            <el-table-column type="selection">
            </el-table-column>

            <el-table-column prop="Name" label="名字" header-align="center" align="center">
            </el-table-column>

            <el-table-column prop="Code" label="编码" header-align="center" align="center">
            </el-table-column>
            <el-table-column prop="Level" label="级别" header-align="center" align="center" width="50">
            </el-table-column>
            <el-table-column prop="OrderSort" label="排序" header-align="center" align="center" width="50">
            </el-table-column>
            <el-table-column prop="IsEnabled" label="状态" ilter-placement="bottom-end" header-align="center" align="center" width="80">
                <template slot-scope="scope">
                    <el-tag size="small" :type="scope.row.IsEnabled ===true ? 'success' : 'danger'" disable-transitions>{{(scope.row.IsEnabled===true?'启用':'禁用')}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="IsDisplay" label="显示" ilter-placement="bottom-end" header-align="center" align="center" width="80">
                <template slot-scope="scope">
                    <el-tag size="small" :type="scope.row.IsDisplay ===true ? 'success' : 'danger'" disable-transitions>{{(scope.row.IsDisplay===true?'显示':'隐藏')}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="Type" label="类型" :formatter="formatType" header-align="center" align="center" width="80">

                <!-- <template slot-scope="scope">
                <el-tag v-if="scope.row.Type === 0" size="small">导航菜单</el-tag>
                <el-tag v-else-if="scope.row.Type === 5" size="small" type="success">按钮</el-tag>
                <el-tag v-else-if="scope.row.Type === 10" size="small" type="info">内部页面</el-tag>
                <el-tag v-else-if="scope.row.Type === 15" size="small" type="danger">方法</el-tag>
            </template> -->
            </el-table-column>
            <el-table-column prop="Icon" label="图标" header-align="center" align="center">
                <template slot-scope="scope">
                    <i  :class="scope.row.Icon || ''"></i>
                </template>
            </el-table-column>
            <el-table-column prop="CreateTime" label="创建时间" :formatter="formatTime" header-align="center" align="center">
            </el-table-column>
            <el-table-column prop="ModifiedTime" label="修改时间" :formatter="formatTime" header-align="center" align="center">
            </el-table-column>
        </el-table>
    </div>
    <el-dialog :title="dialogTitle" :visible.sync="formVisible" v-model="formVisible" :close-on-click-modal="false">
        <el-form :model="formModel" label-width="80px" :rules="formRules" ref="formModel">
            <el-form-item label="名字" prop="Name">
                <el-input v-model="formModel.Name" auto-complete="off"></el-input>
            </el-form-item>
            <template v-if="formModel.Type==5">
                <el-form-item label="方法名" prop="Action">
                    <!-- <el-tooltip class="item" effect="dark" content="当资源类型为按钮时候该方法名为事件名,例:handleAdd" placement="top">
                        <el-input v-model="formModel.Action" auto-complete="off"></el-input>
                    </el-tooltip> -->
                    <el-input v-model="formModel.Action" auto-complete="off"></el-input>
                </el-form-item>
            </template>
            <el-form-item label="编号">
                <el-input v-model="formModel.Code" auto-complete="off"></el-input>
            </el-form-item>

            <el-form-item label="资源类型" prop="Type">
                <el-select v-model="formModel.Type" placeholder="请选资源类型">
                    <el-option v-for="item in typeList" :key="item.Value" :label="item.Text" :value="item.Value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="级别" prop="Level">
                <el-input-number v-model="formModel.Level" :min="0" :max="200"></el-input-number>

            </el-form-item>
            <el-form-item label="排序号" prop="OrderSort">
                <el-input-number v-model="formModel.OrderSort" :min="0" :max="200"></el-input-number>
            </el-form-item>
            <el-form-item label="状态" prop="IsEnabled">
                <el-radio-group v-model="formModel.IsEnabled" prop="IsEnabled" size="small">
                    <el-radio-button :label="true">启用</el-radio-button>
                    <el-radio-button :label="false">禁用</el-radio-button>
                </el-radio-group>
                <!-- <el-radio-group v-model="formModel.IsEnabled" prop="IsEnabled">
                    <el-radio class="radio" :label="true">启用</el-radio>
                    <el-radio class="radio" :label="false">禁用</el-radio>
                </el-radio-group> -->
            </el-form-item>
            <el-form-item label="是否显示" prop="IsDisplay">
                <el-radio-group v-model="formModel.IsDisplay" prop="IsDisplay" size="small">
                    <el-radio-button :label="true">显示</el-radio-button>
                    <el-radio-button :label="false">不显示</el-radio-button>
                </el-radio-group>

            </el-form-item>
            <el-form-item label="模块API" prop="ModuleId">

                <el-select v-model="formModel.ModuleId" placeholder="请选择">
                    <el-option-group v-for="group in moduleList" :key="group.Label" :label="group.Label">
                        <el-option v-for="item in group.Groups" :key="item.Id" :label="item.Value" :value="item.Id">
                            <span style="float: left">{{ item.Value }}</span>
                            <span style="float: right; color: #f56c6c; font-size: 13px">{{ item.Label }}</span>
                        </el-option>
                    </el-option-group>
                </el-select>

            </el-form-item>
            <el-form-item label="图标">
                <el-input v-model="formModel.Icon" :readonly="false" placeholder="图标名称（如:fa fa-home fa-lg）" style="height:32px;line-height:32px;width:35%;"></el-input>
                <span style="margin-left:3px;"><i :class="formModel.Icon"></i></span>
                <fa-icon-tooltip />
            </el-form-item>

            <el-form-item label="上级菜单">
                <popup-tree-input :data="permissionList" :props="popupTreeProps" :prop="formModel.ParentName==null||formModel.ParentName==''?'顶级菜单':formModel.ParentName" :nodeKey="''+formModel.ParentId" :currentChangeHandle="handleTreeSelectChange">
                </popup-tree-input>
            </el-form-item>
            <el-form-item label="描述">
                <el-input type="textarea" v-model="formModel.Description" auto-complete="off"></el-input>
            </el-form-item>

        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click.native="cancel">取消</el-button>
            <el-button type="primary" @click.native="submitForm" :loading="loading">提交</el-button>
        </div>
    </el-dialog>
</section>
</template>

<script>
import {
    getPermissionList,
    getPermissionTypeListItem,
    getPermissionCascaderList,
    addOrUpdatePermissionAsync,
    loadPermissionFormData,
    deletePermission,
    getModuleListItem
} from '../../api/api';
import util from '../../common/js/util';
import PopupTreeInput from "@/components/PopupTreeInput";
import FaIconTooltip from "@/components/FaIconTooltip";
import ButtonBar from '@/components/ButtonBar'
export default {
    components: {

        PopupTreeInput,
        FaIconTooltip,
        ButtonBar
    },
    data() {
        var validateAction = (rule, value, callback) => {
            if (this.formModel.Type == 5) {
                if (value === '') {
                    callback(new Error('方法名不能为空'));
                }
            }
            callback();
        };
        return {
            barKey: "资源列表",
            selection: [],
            listLoading: false,
            permissionList: [],
            dialogTitle: "新增",
            formVisible: false,
            loading: false,
            permissionCascaderList: [],
            formModel: { //表单数据
                Name: "",
                Code: "",
                IsEnabled: true,
                Description: "",
                ParentId: "",
                OrderSort: 0,
                Type: 0,
                Level: 0,
                IsDisplay: true,
                Action: "",
                Icon: "",
                Id: "",
                ModuleId: "",
                ParentName: "",
            },

            formRules: {

                Name: [{
                        required: true,
                        message: '请输入资源名字',
                        trigger: 'blur'
                    },
                    {
                        min: 1,
                        max: 200,
                        message: '长度在 1 到 200 个字符',
                        trigger: 'blur'
                    }
                ],
                Code: [{
                    min: 1,
                    max: 50,
                    message: '长度在 1 到 50 个字符',
                    trigger: 'blur'
                }],
                Action: [{
                    required: true,
                    validator: validateAction,
                }, {
                    min: 1,
                    max: 100,
                    message: '长度在 1 到 100 个字符',
                    trigger: 'blur'
                }],
                Type: [{
                    required: true,
                    message: '请选择类型',
                    trigger: 'blur'
                }],
                Level: [{
                    required: true,
                    message: '请输入级别',
                    trigger: 'blur'
                }],
                OrderSort: [{
                    required: true,
                    message: '请输入排序号',
                    trigger: 'blur'
                }],
                IsEnabled: [{
                    required: true,
                    message: '请选择状态',
                    trigger: 'blur'
                }],
                IsDisplay: [{
                    required: true,
                    message: '请选择显示类型',
                    trigger: 'blur'
                }],

            },
            typeList: [],
            moduleList: [],
            popupTreeProps: {
                label: "Name",
                children: "children"
            }
        }

    },
    methods: {

        callAction: function (params) {

            util.callAction(this, params);
        },
        select: function (selection, row) {

            this.selection = selection;
        },
        formatType: function (row, column, cellValue, index) {
            for (var i = 0, len = this.typeList.length; i < len; i++) { // 这里的i是代表数组的下标
                var item = this.typeList[i];
                if (item.Value == cellValue) {

                    return item.Text;
                }
            }

        },
        formatTime: function (row, column, cellValue, index) {
            var crtTime = new Date(cellValue);
            return util.formatDate.dateFtt("yyyy-MM-dd hh:mm:ss", crtTime);
        },
        getPermissionTypes() {

            getPermissionTypeListItem().then((res) => {

                this.typeList = res.data;
            });

        },
        getPermissions(filters) {
            let para = {

                filters: filters || []
            };

            this.listLoading = true;
            getPermissionList(para).then((res) => {

                this.permissionList = res.data;
                this.listLoading = false;
            });
        },
        handleAdd: function () {

            // let selection = this.selection;
            this.dialogTitle = "新增";
            this.formVisible = true;
            this.formModel = Object.assign({}, {

                Name: "",
                Code: "",
                IsEnabled: true,
                Description: "",
                ParentId: "",
                ParentName: "",
                OrderSort: 0,
                Type: 0,
                Level: 0,
                Icon: "",
                IsDisplay: true,
                Action: "",
                ModuleId: "",
            });
        },
        handleUpdate: function () {
            let _this = this;
            util.getSingleSelectionTableData(this.selection, function (id, row) {
                _this.dialogTitle = "修改";
                let para = {
                    id: id
                };
                loadPermissionFormData(para).then((res) => {
                    let {
                        message,
                        success,
                        type,
                        data
                    } = res;
                    if (res.success) {

                        _this.formModel = data;
                        _this.formVisible = true;

                    }
                    // this.permissionList = res.data;
                    // this.listLoading = false;
                });

            });
        },
        handleDelete: function () {
            var _this = this;
            util.getSingleSelectionTableData(_this.selection, function (id, row) {

                if (row.children.length > 0) {
                    _this.$notify.error({
                        title: '温馨提示!!',
                        message: `当前节点已存在子节点，请先把子节点下数据删除！！！`,
                        showClose: true,
                    });

                    return false;
                }

                var para = {
                    id: id
                };
                _this.listLoading = true;

                deletePermission(para).then((res) => {
                    if (res.success) {

                        _this.$message({
                            message: res.message,
                            type: 'success'
                        });
                        //_this.$refs.search.reset();
                        _this.getPermissions();

                    } else {

                        _this.$message({
                            message: res.message,

                            type: 'error'
                        });
                    }

                });
                _this.listLoading = false;

            });
        },
        cancel: function () {
            this.formVisible = false;
            this.$refs['formModel'].resetFields();
        }, //提交新增与修改数据
        submitForm: function () {

            this.$refs.formModel.validate((valid) => {

                if (valid) {
                    this.$confirm('确认提交吗？', '提示', {}).then(() => {
                        this.loading = true;
                        //NProgress.start();
                        let para = Object.assign({}, this.formModel);
                        addOrUpdatePermissionAsync(para).then((res) => {

                            if (util.isEmt.format(res)) {

                                return;
                            }
                            if (res.success) {

                                //NProgress.done();
                                this.$message({
                                    message: res.message,
                                    type: 'success'
                                });
                                this.$refs['formModel'].resetFields();
                                this.formVisible = false;
                                this.getPermissions();
                            } else {

                                this.$message({
                                    message: res.message,

                                    type: 'error'
                                });

                            }
                            this.loading = false;
                        });
                    });
                }
            });
        },
        getPermissionCascaders() {

            getPermissionCascaderList().then((res) => {

                this.permissionCascaderList = res.data;
            });
        },
        getModuleList() {

            getModuleListItem().then((res) => {

                this.moduleList = res.data;

            });
        },
        handleTreeSelectChange: function (data, node) {
            this.formModel.ParentId = data.Id;
            this.formModel.ParentName = data.Name;
        }

    },
    mounted() {
        this.getPermissions();
        //得到所有权限类型
        this.getPermissionTypes();
        this.getModuleList();
        // this.getPermissionCascaders();

    },

}
</script>
